<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>企业租车订单</title>
		<link rel="stylesheet" href="${cxt }/css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="${cxt }/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="${cxt }/css/orderdetail.css"/>
		<link rel="stylesheet" href="${cxt }/css/llp_order.css" />
		<script type="text/javascript" src="${cxt }/js/jquery-3.2.1.js" ></script>
		<script type="text/javascript" src="${cxt }/js/iconfont.js" ></script>
		<script type="text/javascript" src="${cxt }/js/llp_basicpage.js" ></script>
		<script type="text/javascript" src="${cxt }/js/ls-base.js"></script>
	<style>
	.clear:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
		.update{
			width:70px !important;
			margin:6px;
		}
		.conbox{
			width:400px;
			height:300px;
			position:absolute;
			background:#f11;
			top:50%;
			left:50%;
			margin-top:-150px;
			margin-left:-200px;
			z-index:99;
			display:none;
			border:1px solid #dadada;
			background:#fff;
		}
		.upzttop{
			height:50px;
			background:#f1f1f1;
			position:relative;
			border-bottom:2px solid #dadada;
		}
		.upzttop h3{
			line-height:50px;
			color:#333;
			text-align:center;
			height:50px;
		}
		.upztcon p{
			padding-top:60px;
			height:50px;
			text-align:center;
			font-size:20px;
		}
		.zt{
			border:1px solid #666;
			height:30px;
			width:80px;
			margin-left:20px;
		}
		.upztcon button{
			width:60px;
			height:40px;
			margin-left:20px;
			margin-right:20px;
		}
		.centerbutt{
			width:970px;
		}
		.fl{
			float:left;
		}
		.linkactive{
			background:#4BCF99;
		}
		.return{
			cursor:pointer;
			
		}
		.return:hover{
			color:#fe3;
		}
	</style>
	<script>
		$(function(){
			$(document).on("click",".return",function(){
				$(".box").remove();
			})
			function createCon(data){
				var parent=$("#eporder");
				$("#eporder").empty();
				
				
				for(var i=0;i<data.ist.length;i++){
					if(data.ist[i].eo_fact_return_time){
						data.ist[i].eo_fact_return_time=$.getDate(data.ist[i].eo_fact_return_time.time);
					}
					else{
						data.ist[i].eo_fact_return_time="暂未";
					}
					parent.append('<tr>'+
							'					<td>'+data.ist[i].eo_order_id+'</td>'+
							'					<td>'+data.ist[i].eo_account+'</td>'+
							'					<td>'+data.ist[i].eo_order_status+'</td>'+
							'					<td>'+data.ist[i].eo_rent_type+'</td>'+
							'					<td>'+data.ist[i].rentExpire+'</td>'+
							'					<td>'+data.ist[i].eo_plan_money+'</td>'+
							'					<td>'+data.ist[i].eo_fact_money+'</td>'+
							'					<td>'+
							'						'+data.ist[i].eo_fact_return_time+
							'					</td>'+
							'					<td>'+
							'						'+data.ist[i].eo_remark+''+
							'					</td>'+
							'					'+
							'					<td>'+
							'						<input class="update up1" type="button" value="修改状态" />'+
							'						'+
							'						<input class="update up2" type="button" value="修改实扣金额" />'+
							'						'+
							'					</td>'+
							'					<td>'+
							'						<input class="update up3" type="button" value="增加备注" />'+
							'						<input class="update up4" type="button" value="查看详情" />'+
							'					</td>'+
							'					<td>'+
							'						<input class="update up5" type="button" value="设置还车时间" />'+
							'					</td>'+
							'				</tr>');
				}
				var timetd=parent.find("tr td").eq(7);
			
				
				
			}
			function createConWrap(curr,size){
				$.ajax({
					url:"${cxt}/backstage/enterpriseOrder/querymul1",
					data:{status:$(".tstatus option:selected").eq(0).text(),startTime:$(".starttime").val(),endTime:$(".endTime").val(),orderType:$(".tstatus option:selected").eq(1).attr("value"),keyWord:$(".keyword").val(),curr:curr,size:size},
					success:function(data){
						console.log(data);
						createCon(data);
						$(".sumpage").text("共"+data.pageNum+"页");
						queryCount=data.pageNum;
						var tval=$("#parent tr td:eq(3)");
						if(tval.text()==0){
							tval.text("自选租车");
						}
						else{
							tval.text("车组租车");
						}
						crealink(curr,data.pageNum);
						
					},
					dataType:"json"
				})
				
			}
			$(".query").click(function(){
				createConWrap(1,4);
			})
			$("#eporder").on("click",".up1",function(){
				showBox("upzt");
				upzt.zt=$(this).parents("tr").find("td:eq(2)");
				upzt.id=$(this).parents("tr").find("td:eq(0)");
				var $text=upzt.zt.text();
				$("#upzt option:contains($text)").attr('selected','selected');
			})
			$("#eporder").on("click",".up2",function(){
				showBox("upje");
				upzt.je=$(this).parents("tr").find("td:eq(6)");
				upzt.id=$(this).parents("tr").find("td:eq(0)");
			})
			$("#eporder").on("click",".up3",function(){
				showBox("upmark");
				upzt.mark=$(this).parents("tr").find("td:eq(8)");
				upzt.id=$(this).parents("tr").find("td:eq(0)");
			})
			$("#eporder").on("click",".up4",function(){
				var _this=this;

				var $div=$("<div class='box'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$.ajax({
					url:"${cxt}/backstage/enterpriseOrder/detail1",
					success:function(data){
						$(".box").append(data);
					},
					data:{id:$(_this).parents("tr").find("td").eq(0).text()}
				})
			})
			$("#eporder").on("click",".up5",function(){
				showBox("setreturntime");
				upzt.je=$(this).parents("tr").find("td:eq(7)");
				upzt.id=$(this).parents("tr").find("td:eq(0)");
			})
			var upzt={};
			
			var queryCount=0;
			
			
		
			
			$("#upzt .upztc").click(function(){
				upzt.zt.text($("#upzt option:selected").val());
				var $text=3
				hideBox("upzt");
				$.ajax({
					url:"${cxt}/backstage/enterpriseOrder/upzt.ou",
					data:{'status':$("#upzt option:selected").val(),'id':upzt.id.text()},
					type: "POST",
					success:function(data){
						alert("状态修改成功");
					}
					
				})
			})
			$("#upje .upztc").click(function(){
				upzt.je.text($("#upje input").val());
				hideBox("upje");
				$.ajax({
					url:"${cxt}/backstage/enterpriseOrder/upje.ou",
					data:{'cash':$("#upje input").val(),'id':upzt.id.text()},
					type:'post',
					success:function(data){
						alert("金额设置成功");
					}
				})
			})
			
			
			$("#upmark .upztc").click(function(){
				upzt.mark.text($("#upmark input").val());
				var $text=3
				hideBox("upmark");
				$.ajax({
					url:"${cxt}/backstage/enterpriseOrder/upmark.ou",
					data:{'mark':$("#upmark input").val(),'id':upzt.id.text()},
					type: "POST",
					success:function(data){
						alert("备注设置成功");
					}
					
				})
			})
			
			$("#seedetail .upztc").click(function(){
				upzt.detail.text($("#seedetail input").val());
				var $text=3
				hideBox("seedetail");
				$.ajax({
					url:"${cxt}/backstage/enterpriseOrder/seedetail.ou",
					data:{'status':$("#upzt option:selected").val(),'id':upzt.id.text()},
					type: "POST",
					success:function(data){
						alert("状态修改成功");
					}
					
				})
			})
			
			$("#setreturntime .upztc").click(function(){
				upzt.je.text($("#setreturntime input").val());
				var $text=3
				hideBox("setreturntime");
				$.ajax({
					url:"${cxt}/backstage/enterpriseOrder/setreturntime.ou",
					data:{'returnTime':$("#setreturntime input").val(),'id':upzt.id.text()},
					type: "POST",
					success:function(data){
						alert("状态修改成功");
					}
					
				})
			})
			$("#upzt .upztq").click(function(){
				hideBox("upzt");
			})
			$("#upje .upztq").click(function(){
				hideBox("upje");
			})
			$(".container").on("click",".return",function(){
				alert("sf");
				$(".box").hide();
			})
			$(".butt ul").on("click","li",function(){
				var prevcurr=0;
				var nextcurr=0;
				$(this).siblings("li").each(function(){
					if($(this).hasClass("linkactive")){
						prevcurr=parseInt($(this).text());
					}
				})
				nextcurr=prevcurr+1;
				//获取当前页面的页数
				if($(this).is(":contains(1)")){
					createConWrap(1,4);
					crealink(1,queryCount);
				}
				
				if($(this).is(":contains('下一页')")){
					createConWrap(prevcurr+1,4);
					crealink(prevcurr+1,queryCount);
				}
				if($(this).is(":contains("+nextcurr+")")){
					createConWrap(nextcurr,4);
					crealink(nextcurr,queryCount);
				}
				if($(this).is(":contains(GO)")){
					var gocurr=parseInt($(".butt").find("input").val());
					
					createConWrap(gocurr,4);
					crealink(gocurr,queryCount);
				}
				if($(this).is(":contains('末页')")){
					createConWrap(queryCount,4);
					crealink(queryCount,queryCount);
				}
				if($(this).is(":contains('上一页')")){
					createConWrap(prevcurr-1,4);
					crealink(prevcurr-1,queryCount);
				}
				
			})
			
		})
		function showBox(id){
			var $div=$("<div class='box'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
			$("body").append($div);
			$("#"+id).show();
		}
		function hideBox(id){
			$(".box").hide();
			$("#"+id).hide();
		}
		function crealink(curr,pagenum){
			
			var ul=$(".butt ul");
			ul.empty();
			ul.append('<li><< 上一页</li>'+
					'				<li>首页</li>'+
					'				<li>1</li>'+
					'				<li>2</li>'+
					'				<li>....</li>'+
					'				<li>末页</li>'+
					'				<li>下一页>></li>'+
					'				<li><input type="text" style="width:100%;height:100%;"/></li>'+
					'				<li>GO</li>');
			if(pagenum>3){
				if(curr==1){
					ul.find("li:eq(0)").remove();
					ul.find("li:eq(1)").addClass("linkactive");
				}
				else if(curr==pagenum){
					ul.find("li:eq(6)").remove();
					ul.find("li:eq(4)").text(curr).addClass("linkactive");
					ul.find("li:eq(3)").text(curr-1);
					ul.find("li:eq(2)").text("...");
					
				}
				else{
					ul.find("li:eq(2)").text(curr).addClass("linkactive");
					
					ul.find("li:eq(3)").text(curr+1);
					$("<li>...</li>").insertBefore(ul.find("li:eq(2)"));
				}
			}
			else if(pagenum==3){
				ul.find("li:eq(4)").text(3);
				if(curr==1){
					ul.find("li:eq(0)").remove();
					ul.find("li:eq(1)").addClass("linkactive");
				}else if(curr==2){
					ul.find("li:eq(3)").addClass("linkactive");
				}
				else{
					ul.find("li:eq(6)").addClass("linkactive");
				}
			}
			else if(pagenum==2){
				ul.find("li:eq(4)").remove();
				if(curr==1){
					ul.find("li:eq(0)").remove();
					ul.find("li:eq(1)").addClass("linkactive");
				}else{
					ul.find("li:eq(5)").remove();
					ul.find("li:eq(3)").addClass("linkactive");
				}
			}
		}
	</script>
</head>
<body>
<div class="contentdiv" style="width:100%;">
	<div class="top">
		<i class="iconfont icon-jibenshezhi"></i>
		<span>企业租车订单</span>
	</div>
	<div class="center" style="width:1250px;height:655px;">
		<div class="centertop" style="padding-left:135px;">
			<div style="float:left; margin-top:20px;">
				订单状态:
				<select class="tstatus" style="height:30px;">
					<option>全部</option>
					<option>已预约</option>
					<option>已完成</option>
					<option>租赁中</option>
					<option>已取消</option>
				</select>
			</div>
			<div class="fl" style="margin-top:20px;margin-left:40px;">
				<span>日期:</span><input type="date" style="height:30px;" class="starttime"/>-<input type="date" style="height:30px;" class="endTime"/>
			</div>
			<div class="fl" style="margin-top:20px;margin-left:40px;">
				订单类型:
				<select class="tstatus" style="height:30px;">
					<option value=2>全部</option>
					<option value=0>自选租车</option>
					<option value=1>车组租车</option>
				</select>
			</div>
			<div class="fl"  style="margin-top:20px; margin-left:40px;">
				<input type="text" value="查询" class="keyword"style="width:200px;height:30px;border:1px solid #dadada;color:#888;"/>
				<input type="button" value="查询" class="query" style="width:50px;height:30px;border:1px solid #dadada;background:#4bcf99;color:#fff;"/>
			</div>
			
			<div style="clear:both;height:0px;"></div>
		</div>

		<div class="centerbutt">
			<table border="0" cellpadding="0" cellspacing="0">
				
				<tr>
					<th>订单编号</th>
					<th>企业账户</th>
					<th>订单状态</th>
					<th>订单类型</th>
					<th>租赁时间(天)</th>
					<th>应扣款金额</th>
					<th>实际扣款金额</th>
					<th>还车时间</th>
					<th>备注</th>
					<th>修改操作</th>
					<th>其他操作</th>
					<th>设置还车时间</th>
				</tr>
				<tbody id="eporder">
				<c:forEach items="${ods }" var="od">
				<tr>
					<td>${od.eo_order_id }</td>
					<td>${od.eo_account }</td>
					<td>${od.eo_order_status }</td>
					<td>${od.eo_rent_type==0?"自选租车":"车队租车" }</td>
					<td>${od.rentExpire }</td>
					<td>${od.eo_plan_money*od.rentExpire }</td>
					<td>${od.eo_fact_money==null?0.0:od.eo_fact_money }</td>
					<td>
						${od.eo_fact_return_time==null?"暂未":od.eo_fact_return_time }
					</td>
					<td>
						${od.eo_remark==null?"无":od.eo_remark }
					</td>
					
					<td>
						<input class="update up1" type="button" value="修改状态" />
						
						<input class="update up2" type="button" value="修改实扣金额" />
						
					</td>
					<td>
						<input class="update up3" type="button" value="增加备注" />
						<input class="update up4" type="button" value="查看详情" />
					</td>
					<td>
						<input class="update up5" type="button" value="设置还车时间" />
					</td>
				</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>
		
		<div class="butt" style="padding-left:240px;">
			<div class="sumpage"style="float:left;margin-top:20px;margin-right:20px;margin-left:30px;">共34页:</div>
			<ul class="clear" style="float:left;">
				<li><< 上一页</li>
				<li>首页</li>
				<li>1</li>
				<li>2</li>
				<li>....</li>
				<li>末页</li>
				<li>下一页>></li>
				<li><input type="text" style="width:100%;height:100%;"/></li>
				<li>GO</li>
				
			</ul>
		</div>
	</div>
	
</div>
	<div id="upzt" class="conbox">
		<div class="upzttop">
			<h3>修改状态</h3>
			<span style="position:absolute;right:10px;top:4px;background:#fff;font-size:20px;">x</span>
		</div>
		<div class="upztcon">
			<p>
				<span>订单状态:</span>
				<select class="zt">
					<option value="已预约">
						已预约	
					</option>
					<option value="租赁中">
						租赁中	
					</option>
					<option value="已完成">
						已完成	
					</option>
					<option value="已取消">
						已取消	
					</option>
				</select>
			</p>
			<p>
				<button class="upztq">取消</button>
				<button class="upztc">确认</button>
			</p>
		</div>
	</div>
	
	<div id="upje" class="conbox">
		<div class="upzttop">
			<h3>修改实际扣款金额</h3>
			<span style="position:absolute;right:10px;top:4px;background:#fff;font-size:20px;">x</span>
		</div>
		<div class="upztcon">
			<p>
				<span>实际扣款金额为:</span>
				<input type="text" 	value="0.0" style="width:100px;height:30px;border:1px solid #777;">
			</p>
			<p>
				<button class="upztq">取消</button>
				<button class="upztc">确认</button>
			</p>
		</div>
	</div>
	<div id="upmark" class="conbox">
		<div class="upzttop">
			<h3>增加备注</h3>
			<span style="position:absolute;right:10px;top:4px;background:#fff;font-size:20px;">x</span>
		</div>
		<div class="upztcon">
			<p>
				<span>增加备注:</span>
				<input type="text" value="" style="width:100px;height:30px;border:1px solid #777"/>
			</p>
			<p>
				<button class="upztq">取消</button>
				<button class="upztc">确认</button>
			</p>
		</div>
	</div>
	<div id="seedetail" class="conbox">
		<div class="upzttop">
			<h3>增加备注</h3>
			<span style="position:absolute;right:10px;top:4px;background:#fff;font-size:20px;">x</span>
		</div>
		<div class="upztcon">
			<p>
				<span>增加备注:</span>
				<input type="text" value="" style="width:100px;height:30px;border:1px solid #777"/>
			</p>
			<p>
				<button class="upztq">取消</button>
				<button class="upztc">确认</button>
			</p>
		</div>
	</div>
	<div id="setreturntime" class="conbox">
		<div class="upzttop">
			<h3>增加备注</h3>
			<span style="position:absolute;right:10px;top:4px;background:#fff;font-size:20px;">x</span>
		</div>
		<div class="upztcon">
			<p>
				<span>增加备注:</span>
				<input type="date" value="" style="width:100px;height:30px;border:1px solid #777"/>
			</p>
			<p>
				<button class="upztq">取消</button>
				<button class="upztc">确认</button>
			</p>
		</div>
	</div>
</body>
</html>